<template>
  <img
    v-if="icon in icons && icon == 'tools'"
    :src="'data:image/svg+xml;base64,' + icons[icon]"
    :style="style"
  />
  <svg
    v-else-if="icon in icons"
    :style="style"
    v-html="icons[icon]"
    class="icon"
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
  ></svg>
</template>
<script setup lang="ts">
defineProps({
  icon: {
    type: String,
    default: "undefined",
  },
  style: {
    type: Object,
    default: {},
  },
});
const icons = {
  logo:
    '<path d="M1158.481013 1024c22.197468 0 40.182278-17.98481 40.182278-40.182278V558.663291c0-79.392405-66.916456-143.878481-149.063291-143.878481h-6.481013V34.997468c0-19.281013-15.716456-34.997468-34.997468-34.997468H448.162025C428.881013 0 413.164557 15.716456 413.164557 34.997468V414.78481h-6.481013c-82.146835 0-149.063291 64.486076-149.063291 143.878481v425.154431c0 22.197468 17.98481 40.182278 40.182279 40.182278 22.197468 0 40.182278-17.98481 40.182278-40.182278V558.663291c0-34.997468 30.946835-63.513924 68.86076-63.513924h642.592405c37.913924 0 68.860759 28.516456 68.860759 63.513924v425.154431c0 22.197468 17.98481 40.182278 40.182279 40.182278zM962.75443 414.78481H493.529114V80.364557h469.225316V414.78481z" p-id="3332"></path><path d="M655.55443 169.802532h-62.217721c-5.670886 0-10.36962 4.698734-10.36962 10.36962v62.217721c0 5.670886 4.698734 10.36962 10.36962 10.369621h62.217721c5.670886 0 10.36962-4.698734 10.369621-10.369621V180.172152c0-5.670886-4.698734-10.36962-10.369621-10.36962zM862.946835 169.802532h-62.217721c-5.670886 0-10.36962 4.698734-10.36962 10.36962v62.217721c0 5.670886 4.698734 10.36962 10.36962 10.369621h62.217721c5.670886 0 10.36962-4.698734 10.369621-10.369621V180.172152c0-5.670886-4.698734-10.36962-10.369621-10.36962z" p-id="3333"></path>',
};
window.icons = icons;
</script>
<style scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: currentColor;
  overflow: hidden;
}
</style>
